<template>
  <view class="service-provider-container">
    <!-- 顶部标签页 -->
    <view class="tab-header">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        <view :id="'tab-content-' + index" class="tab-content">
          {{ tab.name }}<text class="count" v-if="tab.count">({{ tab.count }})</text>
        </view>
      </view>
    </view>

    <!-- 使用swiper实现内容区域的横向切换 -->
    <swiper
      class="swiper-content"
      :current="currentTab"
      @change="handleSwiperChange"
      :style="{ height: swiperHeight + 'px' }"
    >
      <swiper-item v-for="(tab, index) in tabs" :key="index">
        <scroll-view 
          scroll-y 
          class="scroll-content"
          @scrolltolower="loadMore"
        >
          <!-- 工单列表 -->
          <view class="order-list">
            <view class="order-item" v-for="(item, idx) in getListByTab(index)" :key="idx">
              <!-- 工单类型和状态 -->
              <view class="order-type">
                <view class="type-tag">{{ item.type }}</view>
                <text class="order-status" :class="item.status">{{ item.statusText }}</text>
              </view>
              
              <!-- 工单信息 -->
              <view class="order-info">
                <text class="time">提单时间：{{ item.time }}</text>
                <text class="order-no">报修单号：{{ item.orderNo }}</text>
                <text class="station">报修单位：{{ item.station }}</text>
              </view>
              
              <!-- 维修员信息 -->
              <view class="maintainer-info">
                <text>维修员：{{ item.repairPerson }}</text>
                <image class="phone-icon bg-color-1" src="/static/phone.png" mode="aspectFit"></image>
              </view>
              
              <!-- 服务商信息 -->
              <view class="company-info">
                <text>维修服务商：{{ item.repairCompany }}</text>
              </view>

              <!-- 底部按钮 -->
              <view class="action-buttons">
                <button class="btn modify-btn" @click="handleDispatch(item)">改派</button>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'

// 标签页数据
const tabs = ref([
  { name: '全部', count: 50 },
  { name: '待派单', count: 13 },
  { name: '待维修', count: 12 },
  { name: '维修中', count: 10 },
  { name: '已完成', count: 15 }
])

const currentTab = ref(0)
const swiperHeight = ref(0)
const indicatorWidth = ref(40)

// 工单列表数据
const orderList = ref([
  {
    type: '加油枪更换',
    status: 'repairing',
    statusText: '维修中',
    time: '2024-10-10 09:00',
    orderNo: 'ZSH1320001',
    station: '北京中石化后沙加油站',
    repairPerson: '张伟',
    repairCompany: '北京凯瑞嘉禾科技有限责任公司'
  },
  // ... 可以添加更多模拟数据
])

// 计算当前标签对应的列表数据
const getListByTab = (tabIndex) => {
  if (tabIndex === 0) return orderList.value
  const statusMap = ['', 'pending', 'waiting', 'repairing', 'completed']
  return orderList.value.filter(item => item.status === statusMap[tabIndex])
}

// 处理 swiper 切换事件
const handleSwiperChange = (e) => {
  currentTab.value = e.detail.current
  updateIndicatorWidth(e.detail.current)
}

// 切换标签
const switchTab = (index) => {
  currentTab.value = index
  updateIndicatorWidth(index)
}

// 加载更多数据
const loadMore = () => {
  console.log('加载更多数据')
}

// 计算 swiper 高度
onMounted(async () => {
  const systemInfo = uni.getSystemInfoSync()
  swiperHeight.value = systemInfo.windowHeight - 100
  
  await nextTick()
  updateIndicatorWidth(currentTab.value)
})

// 更新指示器宽度
const updateIndicatorWidth = (index) => {
  const query = uni.createSelectorQuery()
  query.select(`#tab-content-${index}`).boundingClientRect(data => {
    if (data) {
      indicatorWidth.value = data.width
    }
  }).exec()
}

// 改派按钮点击事件
const handleDispatch = (item) => {
  console.log('改派工单', item)
}
</script>

<style>
.service-provider-container {
  min-height: 100vh;
  background-color: #F5F5F5;
}

/* 标签页样式 */
.tab-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #FFFFFF;
  display: flex;
  width: 100%;
  height: 80rpx;
}

.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
}

.tab-content {
  position: relative;
  display: inline-block;
  text-align: center;
  font-size: 26rpx; /* 由于5个tab，字体稍微小一点 */
}

.count {
  font-size: 24rpx;
  margin-left: 4rpx;
}

.tab-item.active {
  color: #1890FF;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: v-bind(indicatorWidth + 'px');
  height: 4rpx;
  background: #1890FF;
  border-radius: 2rpx;
  transition: width 0.3s ease;
}

/* 工单列表样式 */
.order-list {
  padding: 20rpx;
}

.order-item {
  background: #FFFFFF;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.order-type {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.type-tag {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.order-status {
  font-size: 28rpx;
}

.order-status.pending {
  color: #FF9800;
}

.order-status.waiting {
  color: #FF9800;
}

.order-status.repairing {
  color: #1890FF;
}

.order-status.completed {
  color: #52C41A;
}

.order-info {
  padding: 0 20rpx;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  margin-bottom: 20rpx;
}

.order-info text {
  font-size: 24rpx;
  color: #666666;
}

.maintainer-info {
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.maintainer-info text {
  font-size: 28rpx;
  color: #333333;
}

.phone-icon {
  width: 40rpx;
  height: 40rpx;
}

.company-info {
  padding: 0 20rpx;
  margin-bottom: 20rpx;
}

.company-info text {
  font-size: 24rpx;
  color: #666666;
}

/* 底部按钮样式 */
.action-buttons {
  display: flex;
  justify-content: flex-end;
  padding: 20rpx;
  border-top: 1rpx solid #EEEEEE;
}

.btn {
  padding: 10rpx 30rpx;
  font-size: 28rpx;
  border-radius: 30rpx;
  background: #FFFFFF;
}

.modify-btn {
  color: #1890FF;
  border: 1rpx solid #1890FF;
}

/* 背景色 */
.bg-color-1 {
  background-color: #1890FF;
}

/* Swiper相关样式 */
.swiper-content {
  width: 100%;
}

.scroll-content {
  height: 100%;
}
</style> 